<template>
  <div
    class="drawing"
    @mousemove="mousemove"
    id="drawing"
    @click="drawingClick"
    @mouseup="mouseup"
  >
    <rightMeau @delete="deleteBox" />
    <Box
      v-for="item in state.data"
      :key="item.name"
      :style="item.style"
      :name="item.id"
      @mousedown="selectMousedown"
      @mouseover="selectMouseover"
    >
      <component
        v-bind:is="item.type"
        :params="item.data"
        :style="item.style"
      ></component>
    </Box>
  </div>
</template>
<script lang="ts">
import { defineComponent, watch } from "vue";
import Box from "../dragBox/Box.vue";
import hooks from "./hooks";
import { useStore } from "vuex";
import Card from "@/components/Card/Card.vue";
import rightMeau from "./rightMenu";
import Percentage from "@/components/Percentage/index.vue";
export default defineComponent({
  components: {
    Box,
    rightMeau,
    Card,
    Percentage,
  },
  setup() {
    const { state, mousemove, selectMousedown, mouseup, selectMouseover } = hooks();
    const store = useStore();
    const drawingClick = (e: any) => {
      store.commit("rightClickChange", { show: false });
    };
    const deleteBox = () => {
      state.data.some((item, index) => {
        if (item.id === store.state.rightClick.ID) {
          state.data.splice(index, 1); //start开始位置，index要删数的个数index>0
          return true;
        }
        return false;
      });
    };
    const addData = (type: string, name: string) => {
      const data = [];
      data[0] = [type];
      data[1] = ["40001"];
      const obj = {
        id: `box${state.data.length}`,
        style: { left: 400, top: 400, width: 300, height: 300, zIndex: 1 },
        type,
        name,
        data,
      };
      state.data.push(obj);
      console.log(obj);
    };
    watch(
      () => state.seletData,
      (a) => {
        store.commit("setSeletBoxData", a);
      }
    );
    return {
      state,
      mousemove,
      selectMousedown,
      mouseup,
      selectMouseover,
      drawingClick,
      deleteBox,
      addData,
    };
  },
});
</script>
<style lang="less">
@import "./index.less";
</style>
